import React, { useState, useEffect } from "react";
import axios from "../../utils/request";
import { Table, Space, Input } from "antd";
import { Modal, Button } from "antd";

export default function Home() {
  const [list, setList] = useState([]);
  useEffect(() => {
    getList();
  }, []);
  //渲染
  const getList = () => {
    axios.post("/api/drugList").then((res) => {
      // console.log(res);
      setList([...res.data.data]);
    });
  };
  //删除
  const Del = (id) => {
    axios.post("/api/drugDel", { id }).then((res) => {
      // console.log(res);
      getList();
    });
  };
  //标题
  const columns = [
    {
      title: "序号",
      dataIndex: "id",
    },
    {
      title: "药名",
      dataIndex: "title",
    },
    {
      title: "单价",
      dataIndex: "price",
    },
    {
      title: "处方药",
      dataIndex: "tag",
    },
    {
      title: "操作",
      render: (record) => (
        <Space size="middle">
          <a
            onClick={() => {
              Del(record.id);
            }}
          >
            删除
          </a>
          <a
            onClick={() => {
              Bian(record);
            }}
          >
            编辑
          </a>
        </Space>
      ),
    },
  ];

  //搜所
  const { Search } = Input;
  const onSearch = (value) => {
    axios.post("/api/drugSearch", { value: value }).then((res) => {
      // console.log(res);
      setList([...res.data.data]);
    });
  };
  //添加
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [show, setshow] = useState(false); //开关
  const [oname, setoname] = useState([]);
  const [okeshi, setokeshi] = useState([]);
  const [oid, setoid] = useState([]);

  const name = (e) => {
    setoname(e.target.value);
  };

  const keshi = (e) => {
    setokeshi(e.target.value);
  };

  const showModal = () => {
    setIsModalVisible(true);
  };
  //确定按钮
  const handleOk = () => {
    if (show === true) {
      axios.post("/api/drugset", { oname, okeshi, oid }).then((res) => {
        // console.log(res);
        getList();
      });
      // 新增
    } else if (show === false) {
      axios.post("/api/drugadd", { oname, okeshi }).then((res) => {
        // console.log(res);
        getList();
      });
    }
    clear();
  };

  //取消按钮
  const handleCancel = () => {
    clear();
  };
  //清空
  const clear = () => {
    setIsModalVisible(false);
    setoname("");
    setokeshi("");
    setoid(0);
  };

  //编辑
  const Bian = (record) => {
    // console.log(record);
    setIsModalVisible(true);
    setshow(true);
    setoname(record.title);
    setokeshi(record.price);
    setoid(record.id);
  };

  return (
    <div className="wrapper">
      <div className="add">
        <Button type="primary" onClick={showModal}>
          添加
        </Button>
        <Modal
          title="请输入"
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <p>
            药名:
            <input value={oname} onChange={(e) => name(e)} type="text" />
          </p>
          <p>
            单价:
            <input value={okeshi} onChange={(e) => keshi(e)} type="text" />
          </p>
        </Modal>
      </div>
      <Search
        placeholder="请输入介绍"
        onSearch={onSearch}
        style={{ width: 200 }}
      />
      <Table dataSource={list} columns={columns} />
    </div>
  );
}
